<script setup>
// 引入vuex
import { ref, computed, watch, onMounted } from 'vue';
import { useStore } from 'vuex';
import { useRoute, useRouter } from 'vue-router'; // 正确引入router!
const store = useStore();
const route = useRoute(); // 使用 useRoute 钩子函数获取当前路由
const router = useRouter();
const defaultActive = ref(route.path); // 初始化 defaultActive 为当前路由的路径

// 监听路由变化，更新 defaultActive
watch(() => route.path, (newPath) => {
  defaultActive.value = newPath;
});

const logout = () => {
  store.dispatch('logout').then(() => {
    router.replace('/login');
  });
}

const adminAvatar = store.getters.imageUrl + store.getters.userInfo.avatar;

const center = () => {
  router.replace('/admin/center')
}

// 引入路由获取菜单
const generateMenu = (routes) => {
  return routes.map(route => {
    if(store.getters.roleName === 'user') {
      if (route.path === '/admin/admin' || route.path === '/admin/user') {
        return null;
      }
      return {
        path: route.path,
        label: route.meta ? route.meta.title : '',
        icon: route.meta ? route.meta.icon : '',
        children: route.children ? generateMenu(route.children) : null
      };
    } else {
      return {
        path: route.path,
        label: route.meta ? route.meta.title : '',
        icon: route.meta ? route.meta.icon : '',
        children: route.children ? generateMenu(route.children) : null
      };
    }
  }).filter(route => route !== null);
}

// 计算属性，生成菜单
const menuData = computed(() => generateMenu(router.options.routes));

onMounted(() => {
  // 强制刷新界面，确保数据准确
  if (!sessionStorage.getItem('reloaded')) {
    sessionStorage.setItem('reloaded', 'true');
    window.location.reload();
  } else {
    sessionStorage.removeItem('reloaded');
  }
});
</script>

<template>
  <el-container>
    <el-aside class="el-aside-open">
      <el-menu
          active-text-color="#ffd04b"
          background-color="#545c64"
          class="el-menu-vertical-demo"
          :default-active="defaultActive"
          router
          text-color="#fff"
          style="height: 100%"
      >
        <template v-for="item in menuData" :key="item.index">
          <el-menu-item
              v-for="child in item.children"
              :key="child.path"
              :index="child.path"
          >
            <el-icon>
              <component :is="child.icon" />
            </el-icon>
            <span>{{ child.label }}</span>
          </el-menu-item>
        </template>
      </el-menu>
    </el-aside>
    <el-container>
      <el-header>
        <div class="navBar">
          <h4>项目任务管理系统</h4>
          <div class="navBar-right">
            <div style="display: flex; flex-direction: column; justify-content: center; align-items: center; margin-right: 10px;">
              <span style="font-size: 14px; margin-bottom: 3px;"><el-tag effect="plain">名称：{{ store.getters.userInfo.name }}</el-tag></span>
              <span style="font-size: 14px; margin-bottom: 3px;"  v-if="store.getters.roleName === 'user'">
                <el-tag effect="dark">联系方式：{{ store.getters.userInfo.contact }}
                </el-tag>
              </span>
              <span style="font-size: 14px;" v-if="store.getters.roleName === 'admin'"> 
                <el-tag effect="dark">
                  {{ store.getters.userInfo.role === 0 ? '超级管理员' : '普通管理员' }}
                </el-tag>
              </span>
            </div>
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-avatar shape="square" :size="40" :src="adminAvatar"></el-avatar>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item @click="center">个人中心</el-dropdown-item>
                </el-dropdown-menu>
                <el-dropdown-menu>
                  <el-dropdown-item @click="logout">退出</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </div>
      </el-header>
      <el-main style="padding: 10px;">
        <router-view/>
      </el-main>
    </el-container>
  </el-container>
</template>

<style lang="scss" scoped>

.el-container {
  width: 100%;
  height: 100%;
}

.el-aside-open {
  width: 200px;
}

.container {
  width: calc(100% - 210px);
  height: 100%;

  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  transition: all 0.28s;

  &.hidderContainer {
    width: calc(100% - 67px);
  }
}

::v-deep .el-header {
  padding: 0;
}

.navBar {
  width: 100%;
  height: 60px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 1px 1px rgba(0, 21, 41, 0.08);
  padding: 0 16px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  position: relative;
}

.navBar {
  .navBar-right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;

    ::v-deep .navBar-item {
      display: inline-block;
      margin-left: 18px;
      font-size: 22px;
      color: #5a5e66;
      box-sizing: border-box;
      cursor: pointer;
    }
  }
}

</style>
